<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学习资源 - 泉州文化地图</title>

    <!-- 字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">

    <!-- 样式 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/study.css"> <!-- 新增样式 -->

    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>

<!-- 主体容器 -->
<div class="page-wrapper">

    <!-- 顶部信息栏 -->
    <div class="top-bar">
        <div class="container">
            <span><i class="fas fa-phone"></i> 旅游咨询：1234-567890</span>
            <span><i class="fas fa-clock"></i> 开放时间：08:00 - 18:00</span>
            <div class="language-switcher">
                <a href="#" class="active">中文</a>
                <a href="#">English</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <!-- 导航栏 -->
    <header class="navbar">
        <div id="navigationBar">
            <div class="logo">
                <img src="images/logo.jpg" alt="泉州文化地图">
                <h1>智游泉州</h1>
            </div>
            <nav class="main-nav">
                <ul class="nav-menu">
                    <li class="nav-item"><a href="index.html">首页</a></li>
                    <li class="nav-item"><a href="heritage-list.html">世遗景点</a></li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                        特色体验
                      </a>
                      <div class="dropdown-menu">
                    	<a class="dropdown-item" href="intangible-culture.html">非遗传承</a>
                    	<a class="dropdown-item" href="food-map.html">美食打卡</a>
                    </li>
                    <li class="nav-item"><a href="historical-research.html">历史研学</a></li>
                    <li class="nav-item active"><a href="study-materials.html">学习资源</a></li>
                    <li class="nav-item"><a href="ai-itinerary.html">AI行程规划</a></li>
                    <li class="nav-item user-actions">
                        <a href="user-center.html" class="user-icon"><i class="fas fa-user-circle"></i></a>
                    </li>
                </ul>
            </nav>
            <button class="menu-toggle" aria-label="切换导航菜单">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-content container study-container">

        <!-- 页面标题 -->
        <h1 class="section-title">学习资源中心</h1>

        <!-- 学习导航栏（左侧） -->
        <aside class="sidebar">
            <h3>资源分类</h3>
            <ul class="resource-nav">
                <li class="nav-category active">全部资源</li>
                <li class="nav-category">文献资料</li>
                <li class="nav-category">学术论文</li>
                <li class="nav-category">教学课件</li>
                <li class="nav-category">研究报告</li>
            </ul>
        </aside>

        <!-- 内容区域 -->
        <section class="content-area">

            <!-- 搜索框 -->
            <div class="search-box">
                <input type="text" id="resourceSearch" placeholder="输入关键词搜索资源...">
                <button onclick="searchResources()">🔍</button>
            </div>

            <!-- 资源列表 -->
            <div class="resource-list" id="resourceList">
                <div class="resource-item" data-type="文献资料">
                    <h4>《泉州：宋元中国的世界海洋商贸中心》申遗文本</h4>
                    <p>类型：<span>文献资料</span>｜数量：<span>1份</span>｜大小：<span>12.8MB</span></p>
                    <a href="#" class="btn btn-primary">下载PDF</a>
                </div>

                <div class="resource-item" data-type="学术论文">
                    <h4>《海上丝绸之路中的泉州港口研究》</h4>
                    <p>类型：<span>学术论文</span>｜作者：<span>李明华</span>｜发表时间：<span>2022年3月</span></p>
                    <a href="#" class="btn btn-primary">查看摘要</a>
                </div>

                <div class="resource-item" data-type="教学课件">
                    <h4>历史课程PPT：泉州在世界贸易中的角色</h4>
                    <p>类型：<span>教学课件</span>｜适用年级：<span>高中及以上</span>｜格式：<span>PPTX</span></p>
                    <a href="#" class="btn btn-primary">下载课件</a>
                </div>

                <div class="resource-item" data-type="研究报告">
                    <h4>《泉州文化遗产保护现状评估报告》</h4>
                    <p>类型：<span>研究报告</span>｜发布单位：<span>福建省文物局</span>｜时间：<span>2023年Q4</span></p>
                    <a href="#" class="btn btn-primary">在线查阅</a>
                </div>

                <div class="resource-item" data-type="学术论文">
                    <h4>《闽南地区多元宗教共存现象分析》</h4>
                    <p>类型：<span>学术论文</span>｜作者：<span>王丽芳</span>｜发表期刊：<span>中国文化研究</span></p>
                    <a href="#" class="btn btn-primary">查看摘要</a>
                </div>

                <div class="resource-item" data-type="教学课件">
                    <h4>非遗传承课程教案：拍胸舞教学</h4>
                    <p>类型：<span>教学课件</span>｜适合年龄：<span>10岁以上</span>｜格式：<span>PDF</span></p>
                    <a href="#" class="btn btn-primary">下载教案</a>
                </div>
            </div>
        </section>

    </main>

    <!-- 回到顶部按钮 -->
    <a href="#top" class="back-to-top" aria-label="回到顶部">
        <i class="fas fa-arrow-up"></i>
    </a>

    <!-- 页脚 -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-section">
                    <h3>关于本站</h3>
                    <p>"智游泉州"文旅平台致力于打造一站式泉州文化旅游服务平台，整合泉州优质旅游资源，为游客提供智能化、个性化的旅行体验。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 泉州文化旅游发展有限公司 版权所有</p>
                <p>技术支持：<a href="#">2人团队</a></p>
            </div>
        </div>
    </footer>

</div>

<!-- 自定义 JS -->
<script>
    // 分类筛选功能
    const navCategories = document.querySelectorAll('.nav-category');
    const resourceItems = document.querySelectorAll('.resource-item');

    navCategories.forEach(category => {
        category.addEventListener('click', () => {
            const selectedType = category.textContent.trim();

            navCategories.forEach(cat => cat.classList.remove('active'));
            category.classList.add('active');

            resourceItems.forEach(item => {
                const itemType = item.getAttribute('data-type');

                if (selectedType === '全部资源' || itemType === selectedType) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });

    // 搜索功能
    function searchResources() {
        const input = document.getElementById('resourceSearch').value.toLowerCase();
        resourceItems.forEach(item => {
            const title = item.querySelector('h4').textContent.toLowerCase();
            if (title.includes(input)) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    }
</script>

</body>
</html>